<template>
  <el-form ref="timeForm" :model="timeForm" :rules="timeRules" label-position="left" label-width="110px">
    <el-form-item :label="'时间段'+toChinesNum(index+1)+':'">
      <el-col :span="3">
        <el-form-item prop="startTime">
          <el-time-picker
            v-model="timeForm.startTime"
            value-format="HH:mm"
            format="HH:mm"
            :disabled="disabled"
            placeholder="开始时间"
          />
        </el-form-item>
      </el-col>
      <el-col :span="3" class="line">———————————————</el-col>
      <el-col :span="3">
        <el-form-item prop="endTime">
          <el-time-picker
            v-model="timeForm.endTime"
            value-format="HH:mm"
            format="HH:mm"
            :disabled="disabled"
            placeholder="结束时间"
          />
        </el-form-item>
      </el-col>
      <el-col :span="4" class="el-col-offset-2">
        <!--        <el-col :span="12"><span>默认服务人数</span></el-col>-->
        <el-col :span="22">
          <el-form-item prop="people" label="默认服务人数">
            <el-input-number v-model="timeForm.people" :disabled="disabled" :controls="false" :precision="0" />
          </el-form-item>
        </el-col>
      </el-col>
      <!--      <el-col :span="4" class="el-col-offset-1">
        <el-link type="danger" @click="deleteItem">删除时间段</el-link>
      </el-col>-->
    </el-form-item>
  </el-form>
</template>

<script>
import { toChinesNum } from '@/utils/chineseNum'

export default {
  name: 'DoctorTimeInterval',
  props: {
    index: {
      type: Number,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timeForm: {
        startTime: '',
        endTime: '',
        people: ''
      },
      isValidate: false,
      timeRules: {
        startTime: [
          { required: true, message: '请选择开始时间', trigger: ['blur', 'change'] }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: ['blur', 'change'] }
        ],
        people: [
          { required: true, message: '请输入服务人数', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    toChinesNum,
    validate() {
      this.$refs.timeForm.validate((valid) => {
        this.isValidate = valid
      })
      return this.isValidate
    },
    deleteItem() {
      const vm = this
      vm.$emit('delete', vm.index)
    },
    getData() {
      const vm = this
      return vm.timeForm
    }
  }
}
</script>

<style scoped>
</style>
